<template>
  <div>
    <div class="top">
      <span class="top_log"></span>
      <div class="top_right">
        <el-icon>
          <Promotion />
        </el-icon>
        <div class="top_text_wrap" @click="goToPage('/login')">
          <span class="top_text">login</span>
          <span class="top_text_ripple"></span>
        </div>
      </div>
    </div>
    <div class="banner">
      <span class="bg-banner"></span>
    </div>
    <div class="main">
      <div class="main-left">
        <ul class="cl">
          <li @click="open">
            <el-icon>
              <Warning />
            </el-icon>
            <span>预约须知</span>
          </li>
          <li @click="goToPage('/patient/appointment')">
            <el-icon>
              <Check />
            </el-icon>
            <span>预约挂号</span>
          </li>
          <li @click="goToPage('/patient/myAppointment')">
            <el-icon>
              <Search />
            </el-icon>
            <span>预约记录查询</span>
          </li>
          <li @click="goToPage('/patient/myAppointment')">
            <el-icon>
              <Delete />
            </el-icon>
            <span>取消预约</span>
          </li>
        </ul>
      </div>
      <div class="main-right">
        <h2>网站预约挂号流程</h2>
        <ul>
          <li>
            <span>点击"预约挂号"</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>选择院区及院区科室</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>选择科室</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>选择医生</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>选择就诊时间</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>填写个人基本信息</span>
            <i class="icon-bot"></i>
          </li>
          <li>
            <span>预约成功</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRouter } from 'vue-router'; // 确保正确导入

const router = useRouter();

const goToPage = (route: string) => {
  router.push(route);
};

const open = () => {
  ElMessageBox.alert(
    `<div class="custom-message">
      <p class="ms_title">网络预约</p>
      <p class="text01">可登录预约网站根据提示进行操作：医点通网上挂号平台</p>
      <p class="ms_title">现场预约</p>
      <p class="text01">可在我院的各科分诊台、医生站、挂号处、自助终端机进行现场办理预约，每天8:00-18:00。</p>
      <p class="ms_title">预约规则</p>
      <p class="text01">1、眼科患者须挂医生号和视力费方可就诊</p>
      <p class="text01">2、如支付成功后未推送挂号消息，请不要重复支付，并耐心等待或到分诊台确认</p>
      <p class="text01">3、每张就诊卡挂号限制：限同时挂号三次、每个科室限挂一次、每月6次</p>
      <p class="text01">4、预约后，如不能就诊，请至少提前一天在"取消预约"菜单中取消挂号</p>
      <p class="text01">5、预约挂号到就诊当天未就诊需要取消预约，或者当天挂号后需要取消挂号，请在当天自助机取号并及时前往挂号处退号、退费</p>

    </div>`, '医点通预约挂号系统', {
    customClass: 'custom-message-box', // 自定义类名
    dangerouslyUseHTMLString: true, // 启用 HTML 渲染
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      console.log(`action: ${action}`);
    },
  });
};
</script>

<style>
.top {
  display: flex;
  /* 使用 flexbox 布局 */
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 左右对齐 */
  height: 50px;
  padding: 0 10px;
  /* 添加内边距，避免内容紧贴边缘 */
  background-color: #f9f9f9;
  /* 可选：添加背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影 */
}

/* 定义头部logo样式 */
.top_log {
  background: url(../assets/logo3.png) no-repeat center center;
  background-size: contain;
  /* 保持图片比例，完整显示 */
  width: 20%;
  /* 占据父容器的 20% */
  height: 100%;
  /* 高度与父容器一致 */
  display: block;
}

.top_right {
  display: flex;
  /* 使用 flexbox 布局 */
  align-items: center;
  /* 垂直居中 */
  gap: 8px;
  /* 图标和文字之间的间距 */
  font-size: 20px;
  /* 字体大小 */
  color: #333;
  /* 字体颜色 */
}

.top_right .el-icon {
  font-size: 25px;
  /* 图标大小 */
  color: #007bff;
  /* 图标颜色 */
}

/* 自定义弹窗整体样式 */
.custom-message-box {
  width: 600px;
  /* 设置弹窗宽度 */
  max-width: 90%;
  /* 最大宽度 */
  border-radius: 10px;
  /* 圆角 */
  background-color: #f9f9f9;
  /* 背景颜色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 阴影 */
}

/* 自定义弹窗标题样式 */
.custom-message-box .el-message-box__title {
  font-size: 20px;
  /* 标题字体大小 */
  color: #333;
  /* 标题颜色 */
  font-weight: bold;
  /* 加粗 */
  text-align: center;
  /* 居中对齐 */
}

/* 自定义弹窗内容样式 */
.custom-message {
  padding: 20px;
  /* 内边距 */
}

.custom-message .ms_title {
  font-size: 18px;
  /* 标题字体大小 */
  color: #007bff;
  /* 标题颜色 */
  font-weight: bold;
  /* 加粗 */
  margin-bottom: 10px;
  /* 底部间距 */
}

.custom-message .text01 {
  font-size: 14px;
  /* 文本字体大小 */
  color: #666;
  /* 文本颜色 */
  line-height: 1.6;
  /* 行高 */
  margin-bottom: 10px;
  /* 底部间距 */
}

/* 自定义弹窗按钮样式 */
.custom-message-box .el-message-box__btns {
  text-align: center;
  /* 按钮居中对齐 */
}

.custom-message-box .el-message-box__btns .el-button {
  background-color: #007bff;
  /* 按钮背景颜色 */
  color: #fff;
  /* 按钮文字颜色 */
  border: none;
  /* 移除边框 */
  border-radius: 5px;
  /* 按钮圆角 */
  padding: 10px 20px;
  /* 按钮内边距 */
}

.custom-message-box .el-message-box__btns .el-button:hover {
  background-color: #0056b3;
  /* 按钮悬停背景颜色 */
}

.bg-banner {
  width: 100%;
  height: 260px;
  min-width: 1119px;
  display: block;
  background: url(../assets/static/1.jpg) no-repeat center center;
}

.main-left ul {
  list-style-type: none;
  /* 移除列表的小点 */
}

/* .main {
  width: 1110px;
  height: 660px;
} */

.main-left {
  width: 1110px;
  height: 260px;
  /* float: left; */
  margin: auto;
}

.main-right {
  width: 1110px;
  height: auto;
  /* float: left; */
  margin: auto;
}

.main-left li {
  width: 220px;
  height: 220px;
  margin: 10px 15px;
  background: #1bc9b4;
  border-radius: 20px;
  display: flex;
  float:left;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease; /* 添加过渡动画 */
  cursor: pointer; /* 添加手型指针 */
  position: relative; /* 为涟漪效果定位 */
  overflow: hidden; /* 隐藏溢出效果 */
}

/* 添加点击涟漪效果 */
.main-left li:active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  from {
    width: 0;
    height: 0;
    opacity: 1;
  }
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* 添加点击缩放效果 */
.main-left li:active {
  transform: scale(0.95);
  background: #16b09f; /* 点击时颜色加深 */
}

/* 调整 el-icon 的大小 */
.main-left .el-icon {
  font-size: 150px;
  /* 如果是字体图标，通过 font-size 调整大小 */
  /* 如果是 SVG 图标，可以设置 width 和 height */
  /* width: 24px;
    height: 24px; */
  color: #fff;
  margin-bottom: 8px;
  /* 在图标和文字之间添加间距 */
}

.main-left li span {
  font-size: 20px;
  color: #fff
}

.main-right ul {
  list-style-type: none;
  /* 移除列表的小点 */
}

.main-right h2 {
  width: 1110px;
  height: auto;
  font-size: 30px;
  padding: 20px;
  text-align: center
}

.main-right ul li span {
  background: #1bc9b4;
  width: 300px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  display: block;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
}

.icon-bot {
  background: url(../assets/static/icon-arrow.png);
  width: 34px;
  height: 34px;
  display: block;
  margin: 10px auto;
}

.top_text_wrap {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.top_text {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

/* 涟漪效果 */
.top_text_ripple {
  position: absolute;
  background: rgba(0, 123, 255, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  from {
    width: 0;
    height: 0;
    opacity: 1;
  }
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* 悬停效果 */
.top_text_wrap:hover .top_text {
  color: #0056b3;
}

/* 点击效果 */
.top_text_wrap:active {
  transform: scale(0.95);
}
</style>